<template>
	<navigator :url="`/pages/qiugou/detail?id=${newsId}`">

		<view class="news-card flex bg-white px-[20rpx] py-[32rpx] mb-[30rpx]">
			<view class="news-card-content flex flex-col justify-between flex-1">

				<view class="news-card-content-intro clamp_3   ">
					{{item.desc}}
				</view>

				<view class="text-muted text-xs w-full flex  mt-[12rpx]">
					<view class="flex items-center rft-xian">
						<view >已联系：{{ item.click }} 人</view>
					</view>
					<view class="ml-[20rpx]">
						<text v-if="item.is_baoyou == 2">不出邮费</text>
						<text v-if="item.is_baoyou == 1" >包邮</text>
						<text v-if="item.is_baoyou == 3">按量洽谈</text>
					</view>
				</view>
				<view class="text-muted text-xs w-full flex justify-between  mt-[20rpx]">
					<view class="flex">
						<view class="flex items-center">
							<view class="cor_999 ">报价：</view>
							<view v-if="item.price_type == 1"  class="ml-[10rpx] cor_FF7 text-1xl">按量面议</view>
							<view v-if="item.price_type == 2" class="ml-[10rpx] cor_FF7 text-1xl">￥{{item.price}}</view>
						</view>
						<view class="flex items-center ml-[20rpx]">
							<view class="cor_999 ">质检费：</view>
							<view class="ml-[10rpx] cor_FF7 text-1xl">{{item.qc_price}}%</view>
						</view>
					</view>
					
					<view class="ml-[10rpx] buy-btn">
						我有货
					</view>
				</view>
			</view>
		</view>


		<view class="news-card flex bg-white px-[20rpx] py-[32rpx]" v-if="false">
			<view class="mr-[20rpx]" v-if="item.image">
				<u-image :src="item.image" width="240" height="180"></u-image>
			</view>
			<view class="news-card-content flex flex-col justify-between flex-1">
				<!-- <view class="news-card-content-title text-lg font-medium">{{ item.title }}</view> -->
				<view class=" news-card-content-intro  clamp_4 text-sm mt-[16rpx]">
					{{ item.desc }}
				</view>

				<view class="text-muted text-xs w-full flex justify-between mt-[12rpx]">
					<view>邮费：按量包邮</view>
					<view class="flex items-center">
						<image src="/static/images/icon/icon_visit.png" class="w-[30rpx] h-[30rpx]"></image>
						<view class="ml-[10rpx]">{{ item.click }}</view>
					</view>
				</view>
			</view>
		</view>
	</navigator>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'

	const props = withDefaults(
		defineProps<{
			item : any
			newsId : number
		}>(),
		{
			item: {},
			newsId: ''
		}
	)
</script>

<style lang="scss" scoped>
	.buy-btn{
		height: 40rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		padding: 0 20rpx;
		border: 1px solid  rgb(143, 231, 0);
		border-radius: 20rpx;
		color: rgb(143, 231, 0);
		font-weight: 600;
	}
	
	.rft-xian{
		border-right: 1px solid rgb(153 153 153 / var(--tw-text-opacity));
		padding-right: 20rpx;
	}
	.news-card {
		border-bottom: 1px solid #f8f8f8;
		border-radius: 16rpx;

		&-content {

			&-bytg {
				font-weight: 400;
				font-size: 20rpx;
				height: 30rpx;
				line-height: 30rpx;
				display: inline-block;
				// line-height: 4rpx;
				background-color: red;
				// margin-top: -10rpx;
			}

			&-intro {
				line-height: 1.5;
				font-weight: 600;
				font-size: 30rpx;
				color: #333333;
				// &-tag{
				// 	font-size: 24rpx;
				// }
				// -webkit-line-clamp: 1;
				// overflow: hidden;
				// word-break: break-all;
				// text-overflow: ellipsis;
				// display: -webkit-box;
				// -webkit-box-orient: vertical;
			}
		}
	}
</style>